<template>
	<custom-nav :showBackArrow="true" :title="'设置'"></custom-nav>
	<view class="page-setting" :style="pagePaddingTop">
		<view class="wrap-basic">
			<view class="wrap-basic-item">
				<view>账号</view>
				<view>{{showPhoneUser?showPhoneUser:'您暂未设置手机号'}}</view>
			</view>
			<view class="wrap-basic-item" @tap="handleCancellation">
				<view class="">注销账号</view>
				<image class="icon-arrow" src="/static/icon_arrow_green.png"></image>
			</view>
		</view>
		<view class="wrap-logout" @tap="toBlueTooth">
			<view class="">蓝牙</view>
			<image class="icon-arrow" src="/static/icon_arrow_green.png"></image>
		</view>
		<view class="wrap-logout" @tap="handleLogout">
			<view class="">退出登录</view>
			<image class="icon-arrow" src="/static/icon_arrow_green.png"></image>
		</view>
	</view>
	<custom-modal ref='refLogoutModal' v-model:visible='showLogout' content='您确定要退出登录吗？' :showCancelButton='true'
		@clickCallback='confirmLogout'></custom-modal>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	import CustomNav from "@/components/custom-nav/index.vue"
	import CustomModal from "@/components/custom-modal/index.vue"
	import {
		useUser
	} from "@/hooks/useUser.js"
	const userStore = useUser();
	let userInfo = ref({
		nick_name: "-1",
		weichat_img: '-1',
		amount: '',
		user_phone: ''
	})
	userStore.getUserInfo().then(res => {
		// console.log(res,">>>cacheUserInfo")
		Object.assign(userInfo.value, res?.public_user_info || {})

	}, err => {

	})
	// 昵称显示
	// const showNickName = computed(() => {
	// 	if (userInfo.value && userInfo.value.nick_name && userInfo.value.nick_name != -1) {
	// 		return userInfo.value.nick_name;
	// 	}
	// 	return "您未填写昵称"
	// })
	// // 头像显示
	// const showAvatar = computed(() => {
	// 	if (userInfo.value && userInfo.value.weichat_img && userInfo.value.weichat_img != -1) {
	// 		return userInfo.value.weichat_img;
	// 	}
	// 	return "-1"
	// })
	// 手机号码显示
	const showPhoneUser = computed(() => {
		if (userInfo.value && userInfo.value.user_phone && userInfo.value.user_phone != -1) {
			let tmpPhone = userInfo.value.user_phone;
			tmpPhone = tmpPhone.replace(/(\d{3})\d*(\d{4})/, "$1****$2");
			return tmpPhone
		}
		return ""
	})


	let navHeightInfo = getNavHeightTop();
	const pagePaddingTop = ref({
		"paddingTop": (navHeightInfo.navTotalHeight + uni.upx2px(24)) + 'px'
	})
	let showLogout = ref(false)
	const handleLogout = () => {
		showLogout.value = true;

	}
	const confirmLogout = (res) => {
		if (res) {
			uni.clearStorage()
			uni.reLaunch({
				url: '/pages/login/index'
			})
		}
	}
	const handleCancellation = () => {
		uni.navigateTo({
			url: '/pages/setting/cacellation'
		})
	}
	
	// 跳转到蓝牙模块
	const toBlueTooth = () => {
		uni.navigateTo({
			url: '/pages/setting/bluetooth'
		})
	}
</script>

<style lang="less" scoped>
	.page-setting {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #182836;
		font-size: 30rpx;
		// font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 30rpx;
		box-sizing: border-box;

		.wrap-basic {
			position: relative;
			width: 686rpx;
			padding: 40rpx 32rpx;
			background: #2D4052;
			border-radius: 28rpx;
			margin: 0 auto;
			box-sizing: border-box;

			.wrap-basic-item {
				position: relative;
				width: 100%;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 68rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.icon-arrow {
			position: relative;
			width: 30rpx;
			height: 30rpx;
			vertical-align: top;
		}

		.wrap-logout {
			position: relative;
			width: 686rpx;
			padding: 40rpx 32rpx;
			background: #2D4052;
			border-radius: 28rpx;
			margin: 32rpx auto 0;
			box-sizing: border-box;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>